<template>
    <el-container class="jxc_stock_out_bill_logistics_container">
        <el-main class="main">
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent">
                    <template slot="right_search">
                    </template>
                </headerTemplate>
                <div class="card_content">
                    <vxeTableTemplate :data="resultList" :options.sync="tableOptions"
                                      @event="handleTableEvent" />
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import poiApi from "@common/api/poiApi";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "JxcStockOutBillLogistics",
    data() {
        const _this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            _this.getList();
                        },
                    },
                    {
                        id: "export",
                        type: "primary",
                        show: true,
                        icon: "el-icon-download",
                        label: "导出",
                        class: 'export_btn',
                        permission: 'jxc:stockOutBillLogistics:export',
                        method: () => {
                            _this.logistics_export();
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "outbill_code", label: "出库单号" },
                    { type: "daterange", field: "sent_date", label: "发货日期", style: { width: '200px' }, },
                    { type: "text", field: "logistics_com", label: "物流公司" },
                    { type: "text", field: "logistics_bill_no", label: "物流单号" },
                    { type: "text", field: "recv_name", label: "收货人姓名" },
                    { type: "text", field: "recv_phone", label: "收货人电话" },
                ],
            },
            dataList: [],
            resultList: [],
            tableOptions: {
                ref: 'AccountSetTable',
                container: '.outbill_logistics_container',
                multiSelect: false,
                columns: [
                    {
                        label: '出库单号',
                        prop: 'outbill_code',
                        align: 'center',
                    },
                    {
                        label: '发货日期',
                        prop: 'sent_date',
                        align: 'center',
                        minWidth: 120,
                    },
                    {
                        label: '物流公司',
                        prop: 'logistics_com',
                        align: 'center',
                    },
                    {
                        label: '物流单号',
                        prop: 'logistics_bill_no',
                        align: 'center',
                    },
                    {
                        label: '收货人姓名',
                        prop: 'recv_name',
                        align: 'center',
                    },
                    {
                        label: '收货人地址',
                        prop: 'recv_address',
                        align: 'center',
                    },
                    {
                        label: '收货人电话',
                        prop: 'recv_phone',
                        align: 'center',
                    },
                    {
                        label: '录入人',
                        prop: 'creator_name',
                        align: 'center',
                        minWidth: 120,
                        formatter(row) {
                            if (_this.$utils.isNotEmpty(row.updator_name)) {
                                return row.updator_name;
                            }
                            return row.creator_name;
                        },
                    },
                    {
                        label: '录入时间',
                        prop: 'create_date',
                        align: 'center',
                        minWidth: 160,
                        formatter(row) {
                            if (_this.$utils.isNotEmpty(row.update_date)) {
                                return row.update_date;
                            }
                            return row.create_date;
                        },
                    },
                ],
                pagination: {
                    pageIndex: 1,
                }
            },
            searchForm: {},
            selectionList: [],
        };
    },
    mounted() {
        this.getList(true)
    },
    methods: {
        handleHeaderEvent(event) {
            const _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        getList(query) {
            const _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_QueryLogistics, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.resultList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        // 导出
        logistics_export() {
            let _this = this;
            _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            //Excel通用导出
            let title_field = [
                { name: '序号', key: '_index', width: 10 },
                { name: '出库单号', key: 'outbill_code' },
                { name: '发货日期', key: 'sent_date', databaseFormat: "yyyy-MM-dd", format: 'yyyy-MM-dd', width: 15 },
                { name: '物流公司', key: 'logistics_com', },
                { name: '物流单号', key: 'logistics_bill_no', },
                { name: '收货人姓名', key: 'recv_name', },
                { name: '收货人地址', key: 'recv_address', },
                { name: '收货人电话', key: 'recv_phone', },
            ];
            let convert = {
                is_exception: [ { name: '正常', value: 0 }, { name: '异常', value: 1 } ],
            };
            poiApi.exportExcel(title_field, this.$api.API_QueryLogistics, queryData, '物流清单', convert);
        },
        //
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_stock_out_bill_logistics_container {

}
</style>
